Step 3 of 4: Adding a C1ContextMenu to the C1Menu Control

In This Topic

In the last step, you added submenus to the C1Menu control's menu items. In this step, you will add a C1ContextMenu control to the C1Menu control. This context menu will have one item that, when clicked, will add submenu items to the C1Menu control's top-level "Added Items" top-level menu item that you created in Step 2.

Complete the following steps:

In XAML view, place the following XAML markup right before the </C1:C1Menu> tag:

Markup	Copy Code
<C1:C1ContextMenuService.ContextMenu> <C1:C1ContextMenu x:Name="contextMenu" ItemClick="Menu_ItemClick"> <C1:C1ContextMenu.ItemContainerTransitions> <TransitionCollection> <EntranceThemeTransition FromVerticalOffset="10" FromHorizontalOffset="0" IsStaggeringEnabled="False"/> </TransitionCollection> </C1:C1ContextMenu.ItemContainerTransitions> <C1:C1MenuItem Header="Add"> <C1:C1MenuItem.ItemContainerTransitions> <TransitionCollection> <EntranceThemeTransition FromVerticalOffset="10" FromHorizontalOffset="0" IsStaggeringEnabled="False"/> </TransitionCollection> </C1:C1MenuItem.ItemContainerTransitions> <C1:C1MenuItem Header="New Item"> <C1:C1MenuItem.Icon> <TextBlock Text="" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1MenuItem Header="Existing Item"/> <C1:C1MenuItem Header="Folder"/> <C1:C1Separator /> <C1:C1MenuItem Header="Class"/> </C1:C1MenuItem> <C1:C1Separator /> <C1:C1MenuItem Header="Exclude From Project"/> <C1:C1Separator /> <C1:C1MenuItem Header="Cut"> <C1:C1MenuItem.Icon> <TextBlock Text="" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1MenuItem Header="Copy"> <C1:C1MenuItem.Icon> <TextBlock Text="" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1MenuItem Header="Paste"> <C1:C1MenuItem.Icon> <TextBlock Text="" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1MenuItem Header="Delete"> <C1:C1MenuItem.Icon> <TextBlock Text="" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1MenuItem Header="Rename"/> <C1:C1Separator/> <C1:C1MenuItem Header="Properties"/> </C1:C1ContextMenu> </C1:C1ContextMenuService.ContextMenu>

Markup

Copy Code

<C1:C1ContextMenuService.ContextMenu>
    <C1:C1ContextMenu x:Name="contextMenu" ItemClick="Menu_ItemClick">
        <C1:C1ContextMenu.ItemContainerTransitions>
            <TransitionCollection>
                <EntranceThemeTransition FromVerticalOffset="10" FromHorizontalOffset="0" IsStaggeringEnabled="False"/>
            </TransitionCollection>
        </C1:C1ContextMenu.ItemContainerTransitions>
        <C1:C1MenuItem Header="Add">
            <C1:C1MenuItem.ItemContainerTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition FromVerticalOffset="10" FromHorizontalOffset="0" IsStaggeringEnabled="False"/>
                </TransitionCollection>
            </C1:C1MenuItem.ItemContainerTransitions>
            <C1:C1MenuItem Header="New Item">
                <C1:C1MenuItem.Icon>
                    <TextBlock Text="&#xE1DA;" Style="{StaticResource TextIconStyle}" />
                </C1:C1MenuItem.Icon>
            </C1:C1MenuItem>
            <C1:C1MenuItem Header="Existing Item"/>
            <C1:C1MenuItem Header="Folder"/>
            <C1:C1Separator />
            <C1:C1MenuItem Header="Class"/>
        </C1:C1MenuItem>
        <C1:C1Separator />
        <C1:C1MenuItem Header="Exclude From Project"/>
        <C1:C1Separator />
        <C1:C1MenuItem Header="Cut">
            <C1:C1MenuItem.Icon>
                <TextBlock Text="&#xE16B;" Style="{StaticResource TextIconStyle}" />
            </C1:C1MenuItem.Icon>
        </C1:C1MenuItem>
        <C1:C1MenuItem Header="Copy">
            <C1:C1MenuItem.Icon>
                <TextBlock Text="&#xE16F;" Style="{StaticResource TextIconStyle}" />
            </C1:C1MenuItem.Icon>
        </C1:C1MenuItem>
        <C1:C1MenuItem Header="Paste">
            <C1:C1MenuItem.Icon>
                <TextBlock Text="&#xE16D;" Style="{StaticResource TextIconStyle}" />
            </C1:C1MenuItem.Icon>
        </C1:C1MenuItem>
        <C1:C1MenuItem Header="Delete">
            <C1:C1MenuItem.Icon>
                <TextBlock Text="&#xE107;" Style="{StaticResource TextIconStyle}" />
            </C1:C1MenuItem.Icon>
        </C1:C1MenuItem>
        <C1:C1MenuItem Header="Rename"/>
        <C1:C1Separator/>
        <C1:C1MenuItem Header="Properties"/>
    </C1:C1ContextMenu>
</C1:C1ContextMenuService.ContextMenu>

The above markup adds a C1ContextMenu control to the C1Menu control using the C1ContextMenuService helper class. Note that the C1ContextMenu control contains one C1MenuItem that is attached to the Click event named "Menu_ItemClick".

Add x:Name="AddedItems" to the <c1:C1MenuItem Header="Added Items"/> tag. This gives the item a unique identifier so that you can call it in code.

In this step, you added a C1ContextMenu control to the C1Menu control. In the next step, you will run the project and see the result of the Menu for UWP quick start.